import React, { useState, useEffect } from 'react';
import { 
  Form, 
  Input, 
  Button, 
  Card, 
  Switch, 
  Select, 
  InputNumber, 
  Divider, 
  message, 
  Typography,
  Row,
  Col,
  Space
} from 'antd';
import { 
  SaveOutlined, 
  ReloadOutlined, 
  ClockCircleOutlined, 
  FileSearchOutlined,
  BugOutlined,
  SettingOutlined
} from '@ant-design/icons';
import axios from 'axios';

const { Title, Text } = Typography;
const { Option } = Select;

const BasicSettings = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);

  // 在组件加载时获取当前设置
  useEffect(() => {
    fetchSettings();
  }, []);

  // 获取系统设置
  const fetchSettings = async () => {
    setLoading(true);
    try {
      // 这里应该从后端获取系统设置
      // const response = await axios.get('/api/admin/settings/basic');
      // form.setFieldsValue(response.data);
      
      // 模拟API返回的默认设置数据
      setTimeout(() => {
        form.setFieldsValue({
          sessionTimeout: 24,
          logLevel: 'info',
          autoReconnect: true,
          maxConnections: 20,
          mediaFolder: '/uploads/media',
          enableNotifications: true,
          notificationSound: true,
          systemLanguage: 'zh-CN',
          dateFormat: 'YYYY-MM-DD',
          timeFormat: 'HH:mm:ss',
          enableAuditLog: true
        });
        setLoading(false);
      }, 1000);
    } catch (error) {
      console.error('获取系统设置失败:', error);
      message.error('获取系统设置失败，请重试');
      setLoading(false);
    }
  };

  // 保存系统设置
  const handleSave = async (values) => {
    setSaving(true);
    try {
      // 这里应该将设置保存到后端
      // await axios.post('/api/admin/settings/basic', values);
      
      // 模拟API调用
      setTimeout(() => {
        message.success('系统设置已保存');
        setSaving(false);
      }, 1000);
    } catch (error) {
      console.error('保存系统设置失败:', error);
      message.error('保存系统设置失败，请重试');
      setSaving(false);
    }
  };

  return (
    <div className="basic-settings-container">
      <Card 
        title={
          <Space>
            <SettingOutlined />
            <span>基本系统设置</span>
          </Space>
        }
        bordered={false}
        loading={loading}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSave}
          initialValues={{
            sessionTimeout: 24,
            logLevel: 'info',
            autoReconnect: true,
            maxConnections: 20
          }}
        >
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                name="sessionTimeout"
                label="会话超时时间（小时）"
                rules={[{ required: true, message: '请输入会话超时时间' }]}
              >
                <InputNumber 
                  min={1} 
                  max={168} 
                  style={{ width: '100%' }} 
                  prefix={<ClockCircleOutlined />} 
                  placeholder="会话的超时时长，单位为小时"
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="maxConnections"
                label="最大连接数"
                rules={[{ required: true, message: '请输入最大连接数' }]}
              >
                <InputNumber 
                  min={1} 
                  max={100} 
                  style={{ width: '100%' }} 
                  placeholder="系统可同时连接的WhatsApp账号数量"
                />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                name="logLevel"
                label="日志级别"
                rules={[{ required: true, message: '请选择日志级别' }]}
              >
                <Select placeholder="选择系统日志记录级别">
                  <Option value="debug">调试 (Debug)</Option>
                  <Option value="info">信息 (Info)</Option>
                  <Option value="warn">警告 (Warning)</Option>
                  <Option value="error">错误 (Error)</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="systemLanguage"
                label="系统语言"
                rules={[{ required: true, message: '请选择系统语言' }]}
              >
                <Select placeholder="选择系统默认语言">
                  <Option value="zh-CN">简体中文</Option>
                  <Option value="en-US">English (US)</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Form.Item
            name="mediaFolder"
            label="媒体文件存储目录"
            rules={[{ required: true, message: '请输入媒体文件存储目录' }]}
          >
            <Input 
              prefix={<FileSearchOutlined />} 
              placeholder="媒体文件的服务器存储路径"
            />
          </Form.Item>

          <Divider orientation="left">连接设置</Divider>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                name="autoReconnect"
                label="自动重连"
                valuePropName="checked"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="enableAuditLog"
                label="启用审计日志"
                valuePropName="checked"
                tooltip="记录所有管理员操作，以便溯源"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>
            </Col>
          </Row>

          <Divider orientation="left">通知设置</Divider>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                name="enableNotifications"
                label="启用通知"
                valuePropName="checked"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="notificationSound"
                label="通知声音"
                valuePropName="checked"
              >
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                name="dateFormat"
                label="日期格式"
                rules={[{ required: true, message: '请选择日期格式' }]}
              >
                <Select placeholder="选择日期显示格式">
                  <Option value="YYYY-MM-DD">YYYY-MM-DD</Option>
                  <Option value="DD/MM/YYYY">DD/MM/YYYY</Option>
                  <Option value="MM/DD/YYYY">MM/DD/YYYY</Option>
                  <Option value="YYYY年MM月DD日">YYYY年MM月DD日</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="timeFormat"
                label="时间格式"
                rules={[{ required: true, message: '请选择时间格式' }]}
              >
                <Select placeholder="选择时间显示格式">
                  <Option value="HH:mm:ss">24小时制 (HH:mm:ss)</Option>
                  <Option value="hh:mm:ss a">12小时制 (hh:mm:ss a)</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Divider />

          <Form.Item>
            <Space>
              <Button
                type="primary"
                htmlType="submit"
                icon={<SaveOutlined />}
                loading={saving}
              >
                保存设置
              </Button>
              <Button
                icon={<ReloadOutlined />}
                onClick={fetchSettings}
                disabled={loading}
              >
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default BasicSettings; 